<template>
	<view class="card" :style="{'background':backGround,'margin':margin}" v-if="title||extra">
		<view @click="handleClick(type)" class="content" :style="{'padding':padding}">
			<view style="display: flex;align-items: center;">
				<!-- 左侧图片 -->
				<view :class="isSmall?'smallIconCard':'iconCard'" v-if="icon">
					<image :class="isSmall?'smallIcon':'normalIcon'" mode="aspectFit" :src="icon"></image>
				</view>
				<!-- 大标题以及小标题 -->
				<view class="textCard">
					<text class="title" :style="{'color':titleColor}">{{title}}</text>
					<text class="subTitle" :style="{'color':subTitleColor}" v-if="title&&subTitle">{{subTitle}}</text>
				</view>
			</view>
			<!-- 右侧补充信息 -->
			<view class="extra" :style="{'color':subTitleColor}" v-if="extra" @click.stop=extraClick>
				<view class="extraBtn" v-if="isBtn" :style="{'background':BtnBg}">
					<text :style="{'color':extraColor}">{{extra}}</text>
				</view>
				<text class="extraText" v-else>{{extra}}</text>
			</view>
		</view>
		<view v-if="type==1&&isLogin">
			<view class="line"></view>
			<view class="user" :style="{'padding':padding}">
				<view class="data" v-for="(item,index) in data" :key="index" @click.stop="setData(item.text)">
					<text class="dataValue">{{item.value?item.value:'--'}}</text>
					<text class="dataText">{{item.text}}</text>
				</view>
			</view>
		</view>
		<view class="charts" v-if="type==2||type==3">
			<view class="number">
				<text class="text1">最后一次记录:</text>
				<text
					class="text2">{{chartData.unit?(chartData.series[0].data[chartData.series[0].data.length-1]+chartData.unit):"暂无数据"}}</text>
			</view>
			<view class="canvas">
				<qiun-data-charts canvas2d="true" :ontouch='true' :opts="opts" type="line" :animation="false"
					:chartData="chartData" />
			</view>
			<ppc-loading v-if="loading" :isSmall="true" :inView='true'></ppc-loading>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		toRefs,
		onMounted,
		onUnmounted,
		reactive
	} from 'vue'
	import ppcLoading from '/components/ppcLoading.vue'
	const data = ref([{
		text: '当前(公斤)',
		value: uni.getStorageSync("userInfo").weight
	}, {
		text: '目标(公斤)',
		value: uni.getStorageSync("userInfo").targetWeight
	}, {
		text: '基础代谢',
		value: uni.getStorageSync("userInfo").metabolize
	}])
	const emit = defineEmits(['click', 'extraClick'])
	const loading = ref(true)
	const props = defineProps({
		//根据不同type展示不同内容
		type: {
			type: Number,
			default: 1
		},
		//margin间距
		margin: {
			type: String,
			default: ''
		},
		//是否登录
		isLogin: {
			type: Boolean,
			default: false
		},
		padding: {
			type: String,
			default: ''
		},
		//大标题
		title: {
			type: String,
			default: ""
		},
		//大标题字体颜色
		titleColor: {
			type: String,
			default: "#0f0f0f"
		},
		//小标题
		subTitle: {
			type: String,
			default: ""
		},
		//小标题字体颜色
		subTitleColor: {
			type: String,
			default: "#909399"
		},
		//补充字体颜色
		extraColor: {
			type: String,
			default: "#f7f7f7"
		},
		//图片
		icon: {
			type: String,
			default: "/static/icon/VIP.png"
		},
		//是否为小图片
		isSmall: {
			type: Boolean,
			default: false
		},

		//是否为按钮
		isBtn: {
			type: Boolean,
			default: false
		},
		//按钮背景颜色
		BtnBg: {
			type: String,
			default: "#ccc"
		},
		//右侧额外补充信息
		extra: {
			type: String,
			default: ""
		},
		backGround: {
			type: String,
			default: "#FFF"
		},
		//图片信息
		chartData: {
			type: Object,
			default: {}
		}
	})
	const type = ref(props.type)
	const isLogin = ref(props.isLogin)
	const opts = ref({
		"yAxis": {
			"gridType": "dash",
			"dashLength": 2,
			"showTitle": true,
			"data": [{
				title: props.type == 2 ? '公斤' : props.type == 3 ? '大卡' : ''
			}]
		},
	})
	watch(() => props.chartData.categories, (New, Old) => {
		if (New) {
			loading.value = false
		}
	}, {
		deep: true
	})
	onMounted(() => {
		uni.$on('information', (item) => {
			if (item.type == 'weight') {
				data.value[0].value = item.value
			}
			if (item.type == 'targetWeight') {
				data.value[1].value = item.value
			}
			if (item.type == 'metabolize') {
				data.value[2].value = item.value
			}

		})
	})
	onUnmounted(()=>{
		uni.$off("information")
	})
	const handleClick = (type) => {
		emit('click', type)
	}
	const setData = (type) => {
		emit('setData', type)
	}
	const extraClick = () => {
		emit('extraClick')
	}
</script>

<style lang="scss">
	.card {
		display: flex;
		flex-direction: column;
		border-radius: 30rpx;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background: #F7F7F7
	}

	.user {
		display: flex;
		justify-content: space-evenly;
	}

	.data {
		display: flex;
		flex-direction: column;
		align-items: center;

		.dataText {
			font-size: 22rpx;
			color: #909399;
		}

		.dataValue {
			font-size: 26rpx;
			color: #0f0f0f;
			font-weight: bold;
		}
	}

	.charts {
		position: relative;
		margin: 20rpx;

		.number {
			margin: 20rpx;
			margin-top: 0;
			font-size: 34rpx;
			color: #afafaf;

			.text2 {
				font-size: 40rpx;
				font-weight: bold;
				color: #0f0f0f;
			}
		}
	}

	.content {
		display: flex;
		align-items: center;

		justify-content: space-between;
	}

	.smallIconCard {
		width: 60rpx;
		height: 60rpx;
		overflow: hidden;
		margin-left: 10rpx;
		border-radius: 10rpx;
	}

	.iconCard {
		width: 120rpx;
		height: 120rpx;
		overflow: hidden;
		margin-left: 10rpx;
		border-radius: 50%;
	}

	.smallIcon {
		width: 60rpx;
		height: 60rpx;
	}

	.normalIcon {
		width: 120rpx;
		height: 120rpx;
	}

	.textCard {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;

		text {
			margin: 5rpx 0;
		}
	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
		width: 250rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.subTitle {
		font-size: 24rpx;
		font-weight: bold;
		width: 250rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.extra {
		font-size: 24rpx;
		margin-right: 20rpx;
		font-weight: bold;
	}

	.extraBtn {
		width: 100%;
		height: 100%;
		padding: 10rpx;
		text-align: center;
		border-radius: 34rpx;
	}
</style>